<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body {margin: 0; background-color: #eee;}
ul,h2 {margin:0; padding:0;}
li {list-style:none;}
#list {width:300px; border:1px solid #ccc; background: #fff; margin:200px auto;}
h2 {height:30px; line-height:30px; background:url(normal.gif) no-repeat 4px center; text-indent:24px;}
.sort ul {display:none;}
.sort li {height:24px; line-height:24px; text-indent:24px;}
.active {background:#0FF url(active.gif) no-repeat 4px center;}
.li_active {background:#45db19;}
</style>
<script>
window.onload = function (){
 var aList = document.getElementById('list');
 var aH2 = document.getElementsByTagName('h2');
 var aUl = aList.getElementsByTagName('ul');
 var arr = [];
 var num = 0;

//分组点击展开+背景+再点击收缩
for (var i=0;i<aH2.length;i++){
    aH2[i].index = i;
    aH2[i].onclick = function (){
      if (this.index !== num) {
        aH2[num].className = '';
        aUl[num].style.display = 'none';
        /* for (var i = 0; i < aH2.length; i++) {
        aH2[i].className = '';
        aUl[i].style.display = 'none';
        };  亦可*/
      }       //如果点击的当前按钮和上一次点击的按钮是同一个按钮，就不要清楚掉它的样式，而是交给下面if...else的再点击收缩动作

        if (this.className == 'active'){
            this.className = '';
            aUl[this.index].style.display = 'none';
        }else{
            this.className = 'active';
            aUl[this.index].style.display = 'block';
            num = this.index;                       //将激活的这项赋值出来，让它每次点击是都清空上一个都激活状态
        }
    }    
}

 //找到所有列表的li元素
 for(var i=0;i<aUl.length;i++){
   aLi = aUl[i].getElementsByTagName('li'); //aUl[i]一定一定要记得[i]
  for (var j=0;j<aLi.length;j++){
   arr.push(aLi[j]);
  }
 }

 //li元素选中唯一效果
 for (var i=0;i<arr.length;i++){
  arr[i].onclick = function (){
   for (var i=0;i<arr.length;i++){
    arr[i].className = '';
   }
   this.className = 'li_active';
  }
 }


 
}
</script>
</head>
<body>
 <ul id="list">
  <li class="sort">
   <h2>QQ好友</h2>
   <ul>
    <li>张珊</li> 
    <li>张珊</li> 
    <li>张珊</li> 
    <li>张珊</li> 
   </ul>
  </li>
  <li class="sort">
   <h2>企业好友</h2>
   <ul>
    <li>张三</li> 
    <li>张三</li> 
    <li>张三</li> 
    <li>张三</li> 
   </ul>
  </li>
  <li class="sort">
   <h2>黑名单</h2>
   <ul>
    <li>李四</li> 
    <li>李四</li> 
    <li>李四</li> 
    <li>李四</li> 
   </ul>
  </li>
 </ul>
</body>
</html>